<template>
    <div class="category">
        <headtop></headtop>
        <p class="list">本周流行</p>
        <ul>
            <router-link tag="li" class="content" v-for="(item,index) in categorylist" :key='index'
            :to="{path:(item.link.indexOf('pid=')!=-1?'categorylist':'Preference'),
            query:{deviceId:item.link}}" >

                <img :src="item.image">
                <span>{{item.title}}</span>   
            </router-link>
        </ul>
        <div class="footer"></div> 
    </div> 
</template>
<script>
    import headtop from './header.vue'
    import {mapActions,mapGetters} from 'vuex'
    export default{
        computed:mapGetters([
            'categorylist'
        ]),
        mounted(){
            this.$http.jsonp('https://simba-api.meilishuo.com/venus/mce/v1/urlChange/pc',
                {params: {pid:20783,channel:'wap'}},
                {jsonp:'jsonp1'})
                .then(function(res){
                    console.log(res.body.value)
                    this.$store.state.categorylist=res.body.value
                })},
        methods:mapActions([
        ]),
        components:{headtop}
    }
</script>
<style scoped>
    .list{
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 0.7rem;
        color: rgb(51, 51, 51);
        padding-left: 0.5rem;
    }
    ul{
        display: flex;
        flex-wrap: wrap;        
    }
    .content{
        width: 25%;
        height: 5.23rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid rgb(238, 238, 238);
        border-top: 1px solid rgb(238, 238, 238);
        color: rgb(102, 102, 102);
    }
    .content img{
        width: 80%;
    }
    .footer{
        height: 2rem;
        background: #f2f2f2;
        border-top: 1px solid rgb(238, 238, 238);
        border-bottom: 1px solid rgb(238, 238, 238);
    }   

</style>